<template>
  <section>
    <div class="container">
      <p class="description">这是“产品”页面</p>
      <div>
        <router-link v-bind:to="{name: 'ProductDetails', params: {id: 1}}">1号产品</router-link>
      </div><div>
        <router-link v-bind:to="{name: 'ProductDetails', params: {id: 2}}">2号产品</router-link>
      </div>
      <div>
        标签为{{ params.tag }}，第 {{params.page}} 页，
        <router-link v-bind:to="{name: 'Product', query: {page: 2, tag: 3}}">下一页</router-link>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  data() {
    return {
      params: {}
    }
  },
  watch: {
    $route(to, from) {
      this.params = to.query;
    }
  },
  created() {
    this.params = this.$route.query
  }
}
</script>

<style scoped>
.container div {
  text-align: center;
  line-height: 1.5;
  margin-top: 10px;
  font-size: 28px;
}
</style>